<template>
	<view>
		<view class="gr-top">
			<view class="gr-tc"><text>退出登录</text></view>
			<view class="gr-avatar"><image src="../../static/image/icon/shandui.png" mode=""></image></view>
			<view class="gr-username">
				<text class="username">西巴色的丹岛</text>
				<text>注册码：2434da</text>
			</view>
			<view class="gr-grade">
				<image src="../../static/image/icon/v1.png" mode=""></image>
				<text>等级：V1</text>
			</view>
		</view>
		<view class="gr-list flex" v-for="(list, i) in grList" :key="i">
			<view class="gr-list-nav flex" v-for="(item, s) in list" :key="s" :class="{ m: s === 3 }">
				<view v-if="s === 3">
					<view class="" style="height:82rpx;width: 10rpx;"><image src="../../static/image/personal/kuohao.png" class="bgm" mode=""></image></view>
				</view>
				<view class="">
					<image :src="item.icon" mode=""></image>
					<view>{{ item.text }}</view>
				</view>
			</view>
			<!-- <view class="gr-list-nav" v-if="i===2">
				<view class="" style="height: 82rpx;width: 10rpx;">
					<image src="../../static/image/personal/kuohao.png" class="bgm" mode=""></image>
				</view>
			</view> -->
			<!-- <view class="gr-list-nav">
				<image :src="item.icon" mode=""></image>
				<view>{{item.text}}</view>
			</view>
			<view class="gr-list-nav">
				<image :src="item.icon" mode=""></image>
				<view>{{item.text}}</view>
			</view>
			<view class="gr-list-nav">
				<image :src="item.icon" mode=""></image>
				<view>{{item.text}}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			grList: [
				[
					{
						icon: '../../static/image/personal/qiandai-tianchong.png',
						text: '分享总收益',
						router: ''
					},
					{
						icon: '../../static/image/personal/Clip1.png',
						text: '节点数量',
						router: ''
					},
					{
						icon: '../../static/image/personal/Fill.png',
						text: '全部节点',
						router: ''
					},
					{
						icon: '../../static/image/personal/tuiguang.png',
						text: '我的节点',
						router: ''
					}
				],
				[
					{
						icon: '../../static/image/personal/ico.png',
						text: '分享二维码',
						router: ''
					},
					{
						icon: '../../static/image/personal/lianjie.png',
						text: '分享链接',
						router: ''
					},
					{
						icon: '../../static/image/personal/xiazai.png',
						text: '下载地址',
						router: ''
					},
					{
						icon: '../../static/image/personal/yaoqinghaoyou.png',
						text: '邀请好友',
						router: ''
					}
				],
				[
					{
						icon: '../../static/image/personal/shoujihaoma.png',
						text: '更换手机号',
						router: ''
					},
					{
						icon: '../../static/image/personal/youxiang.png',
						text: '更换邮箱',
						router: ''
					},
					{
						icon: '../../static/image/personal/password.png',
						text: '交易密码',
						router: ''
					},
					{
						icon: '../../static/image/personal/xiugaimima.png',
						text: '账号管理',
						router: ''
					}
				],
				[
					{
						icon: '../../static/image/personal/banbengengxix.png',
						text: '版本更新',
						router: ''
					},
					{
						icon: '../../static/image/personal/yinsizhengce.png',
						text: '隐私政策',
						router: ''
					},
					{
						icon: '../../static/image/personal/yuyanxuanze.png',
						text: '选择语言',
						router: ''
					},
					{
						icon: '../../static/image/personal/guanyuwomen.png',
						text: '关于我们',
						router: ''
					}
				],
				[
					{
						icon: '../../static/image/personal/wenti.png',
						text: '解答问题',
						router: ''
					},
					{
						icon: '../../static/image/personal/gerenzhongxin.png',
						text: '需要帮助',
						router: ''
					},
					{
						icon: '../../static/image/personal/lianxiwomen.png',
						text: '联系我们',
						router: ''
					},
					{
						icon: '../../static/image/personal/kefu.png',
						text: '在线客服',
						router: ''
					}
				]
			]
		};
	}
};
</script>

<style lang="scss">
.gr-top {
	background: url(../../static/image/wode-bg.png) no-repeat 100%;
	padding: 40rpx;
	color: #ffffff;
	height: 592rpx;
	background-size: 100% 100%;
	.gr-tc {
		font-size: 20rpx;
		text-align: right;
		padding: 40rpx 0;
	}
	.gr-avatar {
		overflow: hidden;
		text-align: center;
		image {
			width: 142rpx;
			height: 142rpx;
			border-radius: 50%;
		}
	}
	.gr-username {
		text-align: center;
		font-size: 22rpx;
		padding: 50rpx 0;
		text {
			display: block;
		}
		.username {
			font-size: 28rpx;
		}
	}
	.gr-grade {
		text-align: right;
		margin-top: 60rpx;
		image {
			width: 30rpx;
			height: 20rpx;
			vertical-align: inherit;
			margin-right: 20rpx;
		}
		text {
			font-size: 24rpx;
		}
	}
}
.gr-list {
	margin-top: 18rpx;
	background-color: #ffffff;
	padding: 40rpx;
	overflow: hidden;
	.gr-list-nav {
		display: flex;
		justify-content: center;
		flex: 1;
		text-align: center;
		font-size: 22rpx;
		image {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 15rpx;
		}
		.bgm {
			height: 100%;
			width: 100%;
		}	
	}
	.m {
		justify-content: space-around;
	}
}
</style>
